<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构赋值(正常的解构赋值方式)</title>
</head>
<body>
  <script>
    let obj = {name: "zs",age: 20};
    console.log(obj.name);// zs
    console.log(obj.age);// 20

    //拆解对象时，变量名必须和对象的key一致
    let {name,age} = {name: "zs",age: 20};
    console.log(name);// zs
    console.log(age);// 20


    const ary = ['德玛西亚','艾欧尼亚','诺克萨斯'];
    console.log(ary[0], ary[1], ary[2]);// 德玛西亚 艾欧尼亚 诺克萨斯

    //数组的解构赋值
    const [a,b,c] = ['德玛西亚','艾欧尼亚','诺克萨斯'];
    console.log(a);// 德玛西亚
    console.log(b);// 艾欧尼亚
    console.log(c);// 诺克萨斯
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构赋值(使用别名解构赋值方式)</title>
</head>
<body>
  <script>
    //当使用了别名之后，原名就无法使用了
    const {name:heroname,word} = {name:'亚索', word:'面对疾风吧'};
    console.log(heroname);//亚索
    console.log(name);// 什么都没有(空的) 使用别名后 就不能在使用原名了
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构赋值(变量数量和单元值数量不对等)</title>
</head>
<body>
 <script>
    //对象解构赋值，定义的原值顺序可以打乱，个数也可以随意，不影响解构的结果
    const {names,team} = {names:'张三丰', age:'108', team:'武当派'};
    console.log(names);//张三丰
    console.log(team);//武当派

    //数组解构赋值，使用逗号(,)进行占据数组中数据的位置
    const [a,,,d] = ['少林派','崆峒派','峨眉派','苹果派'];
    console.log(a);//少林派
    console.log(d);//苹果派
  
    //当变量数 多于 单元值数量时，没有对应的变量为undefined
    const {name,age,gender,job} = {name:'灭绝师太',job:'掌门'};
    console.log(name);//灭绝师太
    console.log(age);//undefined
    console.log(gender);//undefined
    console.log(job);//掌门
  </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构赋值(扩展运算符 ...)</title>
</head>
<body>
  <script>
    const [a,b,...c] = ['德玛西亚','艾欧尼亚','诺克萨斯','皮尔特沃夫','暗影岛','班德尔城'];
    console.log(a);//德玛西亚
    console.log(b);//艾欧尼亚
    console.log(c);//['诺克萨斯','皮尔特沃夫','暗影岛','班德尔城']
  </script>
  
  <script>
    const [e,...f,i] = ['张三','李四','王五','赵六','田七'];//报错 因为扩展运算符的位置不对
    console.log(e);
    console.log(f);
    console.log(i);
  </script>
</body>
</html>